<template>
  <div class="dashboard">
    <my-chart :option="options" />
  </div>
</template>

<script>
import { createComponent } from 'echarts-for-vue';
import * as echarts from 'echarts';

export default {
  components: {
    MyChart: createComponent({ echarts }),
  },
  data () {
    return {
      res: {
        code: 200,
        msg: 'success',
        data: [
          { date: 'Mon', value: 150 },
          { date: 'Tue', value: 120 },
          { date: 'Wed', value: 110 },
          { date: 'Thu', value: 50 },
          { date: 'Fri', value: 190 },
          { date: 'Sat', value: 200 },
          { date: 'Sun', value: 120 },
        ],
      },
    };
  },
  computed: {
    options () {
      return {
        xAxis: {
          type: 'category',
          // data: res.data.map(item => item.date),
          data: this.res.data.map(({ date }) => date),
        },
        yAxis: {
          type: 'value',
        },
        series: [{
          data: this.res.data.map(item => item.value),
          type: 'line',
        }],
      };
    },
  },
  mounted () {
    setInterval(() => {
      this.res.data = this.res.data.map((item) => {
        return {
          ...item,
          value: Math.random() * 200,
        };
      });
    }, 1000);
  },
}
</script>

<style scoped>
.dashboard {
  width: 100%;
  height: 100%;
}
</style>
